<template>
	<view class="tabBar">
		<view class="cont">
			<block v-for="(item,index) in list" :key="index" class="cont-item">
				<view @click="switchTab(item.pagePath)"
					:class="{'search': item.search ? true : false, 'item': !item.search, 'on': selected === index ? true : false, 'off': selected != index ? true : false}">
					<image :src="selected===index ? item.selectedIconPath : item.iconPath"
						:class="{'rotating-element':index==1}">
					</image>
					<view :class="{'txt': true,'selectedColor': selected === index ? true : false}">{{item.text}}</view>
				</view>

			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selected: Number
		},
		data() {
			return {
				color: "#fff",
				selectedColor: "#6777FD",
				list: [{
						"pagePath": "/pages/tabBar/home/home",
						"iconPath": "/static/img/tabBar/tab1.png",
						"selectedIconPath": "/static/img/tabBar/tab1_on.png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/tabBar/order/add",
						"iconPath": "/static/img/tabBar/tab3.png",
						"selectedIconPath": "/static/img/tabBar/tab3_on.png",
						"text": "一键回收"
					},
					{
						"pagePath": "/pages/tabBar/user/user",
						"iconPath": "/static/img/tabBar/tab4.png",
						"selectedIconPath": "/static/img/tabBar/tab4_on.png",
						"text": "我的"
					}
				]
			}
		},
		methods: {
			switchTab(url) {
				uni.switchTab({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabBar {
		z-index: 100;
		right: 0;
		left: 0;
		position: fixed;
		bottom: 0;
		font-size: 28rpx;
		background-color: #fff;
		color: #636363;
	box-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 9px #58c2ca, 0 0 0px #58c2ca;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.rotating-element {
		animation: rotate 2s linear infinite;
	}

	.cont {
		z-index: 0;
		padding: 20rpx;
		padding-bottom: 30rpx;
		display: flex;
		justify-content: space-around;

		.item {
			font-size: 24rpx;
			position: relative;
			width: 50%;
			text-align: center;
			padding: 0;
			display: block;
		}
		
		.item image {
			width:45rpx ;
			height: 45rpx ;
			margin: auto
		}
		.item:nth-child(2) image{
			width:80rpx ;
			height: 80rpx ;
		}
		
		.txt {
			font-size: 20rpx;
			line-height: auto;
		}

		.on {
			position: relative;
		}

		.search {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			top: -50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.search image {
			width: 100rpx !important;
			height: 100rpx !important;
			z-index: 2;
			border-radius: 100%;
		}

		.search .txt {
			margin-top: 26rpx;
		
		}

		.selectedColor {
			color: #00BCD4;
		}
	}
.item:nth-child(2){

	margin-top: -60rpx;
	border-radius:100%;
	background: #fff;
	width: 30%;
	margin-left:10%;
	margin-right:10%;
	position: relative;
	&::after {
	  content: '';
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  	border-radius:100%;
	  z-index: -1;
	  top: 0;
	  right: 0;
	  left: 0;
	}
	image{
		width: 86rpx;
		height: 86rpx;
		padding: 10rpx;
	}
	.txt{
		margin-top: -10rpx;
		position: relative;
		z-index: 10;
		font-size: 24rpx;
	}
		
	}
	
	

</style>